<template>
	<view class="swiperbox">
		<swiper class="swiper" circular indicator-dots="true;" indicator-color="gray" indicator-active-color="white"
			autoplay="true" interval="5000" duration="500">
			<swiper-item>
				<image src="../../static/swiper/77748.png" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/swiper/77748.png" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/swiper/77748.png" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="text-box">
			<view class="text1">
				[错峰出游] 正当时
			</view>
			<view class="text2">
				避开人群 价格合适
			</view>
		</view>
		<view class="dir">
			重庆
		</view>
		<view class="search">
			<uv-search placeholder="目的地/关键词" bgColor="white" :actionStyle="actionStyle" shape="square" v-model="keyword"
				showAction="true" actionText="搜索"></uv-search>
		</view>
	</view>
	<view class="top">
		<view class="">
			
		</view>
		<view class="">
			
		</view>
		<view class="">
			
		</view>
	</view>
	<view class="">
		
	</view>
	<view class="">
		
	</view>
</template>

<script setup>
	const actionStyle = {
		color: "white"
	}
</script>

<style lang="scss" scoped>
	.swiperbox {
		position: relative;

		.text-box {
			position: absolute;
			top: 250rpx;
			left: 30rpx;
			transform: rotateZ(-10deg);

			.text1,
			.text2 {
				color: white;
				font-size: 40rpx;
			}
		}

		.dir {
			position: absolute;
			top: 30rpx;
			left: 20rpx;
			color: white;
			font-size: 30rpx;
		}

		.search {
			position: absolute;
			top: 20rpx;
			left: 100rpx;
			width: 85%;
			height: 30rpx;
		}

		.swiper {
			width: 100%;
			height: 400rpx;

			swiper-item {
				width: 100%;
				height: 400rpx;

				image {
					width: 100%;
					height: 400rpx;
				}
			}
		}
	}

	
</style>